// 练习智能体前端交互脚本

document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const exerciseForm = document.getElementById('exercise-form');
    const exerciseDisplay = document.getElementById('exercise-display');
    const feedbackSection = document.getElementById('feedback-section');
    const generateBtn = document.getElementById('generate-btn');
    const runCodeBtn = document.getElementById('run-code');
    const submitSolutionBtn = document.getElementById('submit-solution');
    const newExerciseBtn = document.getElementById('new-exercise-btn');
    const showHintBtn = document.getElementById('show-hint-btn');
    const tryAgainBtn = document.getElementById('try-again-btn');
    const showSolutionBtn = document.getElementById('show-solution-btn');
    const nextExerciseBtn = document.getElementById('next-exercise-btn');
    const hintModal = document.getElementById('hint-modal');
    const closeModal = document.querySelector('.close-modal');
    const codeArea = document.getElementById('code-area');
    const outputContainer = document.getElementById('output-container');
    const outputArea = document.getElementById('output-area');
    const solutionContainer = document.getElementById('solution-container');
    
    // 当前练习数据
    let currentExercise = null;
    
    // 表单提交处理 - 生成新练习
    exerciseForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const formData = new FormData(exerciseForm);
        const exerciseRequest = {
            topic: formData.get('topic'),
            difficulty: formData.get('difficulty'),
            exercise_type: formData.get('exercise_type'),
            additional_requirements: formData.get('additional_requirements')
        };
        
        // 显示加载状态
        generateBtn.textContent = '生成中...';
        generateBtn.disabled = true;
        
        // 模拟API调用 - 在实际应用中替换为真实的API调用
        setTimeout(() => {
            // 模拟从后端获取的练习数据
            currentExercise = generateMockExercise(exerciseRequest);
            
            // 显示练习
            displayExercise(currentExercise);
            
            // 重置按钮状态
            generateBtn.textContent = '生成练习';
            generateBtn.disabled = false;
            
            // 显示练习区域，隐藏表单
            exerciseForm.parentElement.style.display = 'none';
            exerciseDisplay.style.display = 'block';
            
            // 重置输出区域
            outputContainer.style.display = 'none';
            
            // 重置反馈区域
            feedbackSection.style.display = 'none';
        }, 1500);
    });
    
    // 运行代码按钮
    runCodeBtn.addEventListener('click', function() {
        const code = codeArea.textContent;
        
        // 显示输出区域
        outputContainer.style.display = 'block';
        outputArea.innerHTML = '<div class="loading">运行中...</div>';
        
        // 模拟代码运行 - 在实际应用中替换为真实的代码运行逻辑
        setTimeout(() => {
            // 模拟运行结果
            const output = simulateCodeExecution(code);
            outputArea.innerHTML = output;
        }, 1000);
    });
    
    // 提交解答按钮
    submitSolutionBtn.addEventListener('click', function() {
        const code = codeArea.textContent;
        
        // 显示加载状态
        submitSolutionBtn.textContent = '评估中...';
        submitSolutionBtn.disabled = true;
        
        // 模拟提交代码评估 - 在实际应用中替换为真实的API调用
        setTimeout(() => {
            // 模拟评估结果
            const feedback = generateMockFeedback(code, currentExercise);
            
            // 显示评估结果
            displayFeedback(feedback);
            
            // 重置按钮状态
            submitSolutionBtn.textContent = '提交解答';
            submitSolutionBtn.disabled = false;
            
            // 显示反馈区域，隐藏练习区域
            exerciseDisplay.style.display = 'none';
            feedbackSection.style.display = 'block';
        }, 2000);
    });
    
    // 显示提示按钮
    showHintBtn.addEventListener('click', function() {
        document.getElementById('hint-content').innerHTML = currentExercise.hint;
        hintModal.style.display = 'block';
    });
    
    // 关闭模态框
    closeModal.addEventListener('click', function() {
        hintModal.style.display = 'none';
    });
    
    // 点击模态框外部关闭
    window.addEventListener('click', function(e) {
        if (e.target === hintModal) {
            hintModal.style.display = 'none';
        }
    });
    
    // 生成新练习按钮
    newExerciseBtn.addEventListener('click', function() {
        exerciseDisplay.style.display = 'none';
        exerciseForm.parentElement.style.display = 'block';
        exerciseForm.reset();
    });
    
    // 重新尝试按钮
    tryAgainBtn.addEventListener('click', function() {
        feedbackSection.style.display = 'none';
        exerciseDisplay.style.display = 'block';
        solutionContainer.style.display = 'none';
    });
    
    // 显示参考解答按钮
    showSolutionBtn.addEventListener('click', function() {
        solutionContainer.style.display = 'block';
        document.getElementById('solution-code').innerHTML = `<pre><code>${currentExercise.solution}</code></pre>`;
    });
    
    // 下一个练习按钮
    nextExerciseBtn.addEventListener('click', function() {
        feedbackSection.style.display = 'none';
        exerciseForm.parentElement.style.display = 'block';
        exerciseForm.reset();
        solutionContainer.style.display = 'none';
    });
    
    // 显示练习内容
    function displayExercise(exercise) {
        document.getElementById('exercise-title').textContent = exercise.title;
        document.getElementById('exercise-topic').textContent = exercise.topic_name;
        document.getElementById('exercise-topic').className = 'topic-badge';
        
        const difficultyBadge = document.getElementById('exercise-difficulty');
        difficultyBadge.textContent = exercise.difficulty_name;
        difficultyBadge.className = 'difficulty-badge ' + exercise.difficulty;
        
        document.getElementById('exercise-description').innerHTML = exercise.description;
        
        // 设置初始代码
        codeArea.textContent = exercise.initial_code;
    }
    
    // 显示反馈内容
    function displayFeedback(feedback) {
        // 设置分数
        document.getElementById('score-value').textContent = feedback.score;
        
        // 根据分数设置颜色
        const scoreCircle = document.getElementById('score-circle');
        if (feedback.score >= 80) {
            scoreCircle.style.backgroundColor = 'var(--success-color)';
        } else if (feedback.score >= 60) {
            scoreCircle.style.backgroundColor = 'var(--warning-color)';
        } else {
            scoreCircle.style.backgroundColor = 'var(--error-color)';
        }
        
        // 设置反馈摘要
        document.getElementById('feedback-summary').textContent = feedback.summary;
        
        // 设置代码优点
        const strengthsList = document.getElementById('code-strengths');
        strengthsList.innerHTML = '';
        feedback.strengths.forEach(strength => {
            const li = document.createElement('li');
            li.textContent = strength;
            strengthsList.appendChild(li);
        });
        
        // 设置改进建议
        const suggestionsList = document.getElementById('improvement-suggestions');
        suggestionsList.innerHTML = '';
        feedback.suggestions.forEach(suggestion => {
            const li = document.createElement('li');
            li.textContent = suggestion;
            suggestionsList.appendChild(li);
        });
    }
    
    // 模拟代码执行 - 在实际应用中将被替换
    function simulateCodeExecution(code) {
        // 这里只是一个简单的模拟，实际应用中应该调用后端API执行代码
        if (code.includes('println!')) {
            const printStatements = code.match(/println!\s*\(\s*"([^"]*)"\s*\)/g);
            if (printStatements) {
                return printStatements
                    .map(stmt => {
                        const match = stmt.match(/println!\s*\(\s*"([^"]*)"\s*\)/);
                        return match ? match[1] : '';
                    })
                    .join('<br>');
            }
        }
        
        if (code.includes('panic!')) {
            return '<span style="color: var(--error-color);">thread \'main\' panicked at \'程序崩溃\'</span>';
        }
        
        return '程序执行完毕，没有输出';
    }
    
    // 生成模拟练习 - 在实际应用中将被替换为API调用
    function generateMockExercise(request) {
        const topicMap = {
            'variables': '变量与可变性',
            'data_types': '数据类型',
            'functions': '函数',
            'control_flow': '控制流',
            'ownership': '所有权',
            'borrowing': '借用与引用',
            'slices': '切片类型',
            'structs': '结构体',
            'enums': '枚举',
            'pattern_matching': '模式匹配',
            'vectors': '向量',
            'strings': '字符串',
            'hashmaps': '哈希映射',
            'error_handling': '错误处理',
            'generics': '泛型',
            'traits': '特征',
            'lifetimes': '生命周期',
            'closures': '闭包',
            'iterators': '迭代器',
            'smart_pointers': '智能指针',
            'concurrency': '并发编程'
        };
        
        const difficultyMap = {
            'beginner': '初级',
            'intermediate': '中级',
            'advanced': '高级'
        };
        
        // 根据请求的主题生成练习
        let exercise = {
            id: Math.floor(Math.random() * 1000),
            topic: request.topic,
            topic_name: topicMap[request.topic] || request.topic,
            difficulty: request.difficulty,
            difficulty_name: difficultyMap[request.difficulty] || request.difficulty,
            exercise_type: request.exercise_type,
            title: '',
            description: '',
            initial_code: '',
            solution: '',
            hint: ''
        };
        
        // 根据主题和难度生成不同的练习内容
        switch (request.topic) {
            case 'variables':
                exercise.title = '变量与可变性练习';
                if (request.difficulty === 'beginner') {
                    exercise.description = `
                        <p>在Rust中，变量默认是不可变的，除非使用<code>mut</code>关键字声明为可变变量。</p>
                        <p><strong>任务</strong>：创建一个名为<code>greeting</code>的可变字符串变量，初始值为"Hello"，然后将其修改为"Hello, Rust!"。</p>
                        <p><strong>要求</strong>：</p>
                        <ul>
                            <li>正确声明可变变量</li>
                            <li>成功修改变量值</li>
                            <li>打印修改后的变量值</li>
                        </ul>
                    `;
                    exercise.initial_code = `fn main() {
    // 在这里声明greeting变量
    
    // 在这里修改greeting变量
    
    // 打印greeting变量
    
}`;
                    exercise.solution = `fn main() {
    // 声明可变变量
    let mut greeting = "Hello";
    
    // 修改变量值
    greeting = "Hello, Rust!";
    
    // 打印变量值
    println!("{}", greeting);
}`;
                    exercise.hint = '记得使用<code>mut</code>关键字声明可变变量，例如：<code>let mut x = 5;</code>';
                } else if (request.difficulty === 'intermediate') {
                    // 中级难度练习内容
                    exercise.description = `
                        <p>Rust的变量遮蔽(Shadowing)允许我们使用相同的名称声明新变量，从而遮蔽之前的变量。</p>
                        <p><strong>任务</strong>：使用变量遮蔽，将一个字符串类型的数字转换为数值类型并加5，然后打印结果。</p>
                        <p><strong>要求</strong>：</p>
                        <ul>
                            <li>初始变量为字符串"10"</li>
                            <li>使用变量遮蔽将其转换为数值类型</li>
                            <li>对转换后的值加5</li>
                            <li>打印最终结果（应为15）</li>
                        </ul>
                    `;
                    exercise.initial_code = `fn main() {
    // 初始字符串变量
    let num = "10";
    
    // 使用变量遮蔽将字符串转换为数值并加5
    
    
    // 打印结果
    
}`;
                    exercise.solution = `fn main() {
    // 初始字符串变量
    let num = "10";
    
    // 使用变量遮蔽将字符串转换为数值
    let num: i32 = num.parse().expect("无法解析为数字");
    
    // 再次使用变量遮蔽加5
    let num = num + 5;
    
    // 打印结果
    println!("结果是: {}", num);
}`;
                    exercise.hint = '使用<code>parse()</code>方法将字符串转换为数值，记得处理可能的错误，可以使用<code>expect()</code>或<code>unwrap()</code>';
                }
                break;
                
            case 'ownership':
                exercise.title = '所有权系统练习';
                if (request.difficulty === 'beginner') {
                    exercise.description = `
                        <p>Rust的所有权系统是其最独特的特性之一，它确保了内存安全而无需垃圾回收。</p>
                        <p><strong>任务</strong>：创建一个函数，接收一个String类型参数并返回该字符串的长度。在main函数中调用该函数并打印结果。</p>
                        <p><strong>要求</strong>：</p>
                        <ul>
                            <li>函数应该获取String的所有权</li>
                            <li>函数应返回字符串的长度</li>
                            <li>确保代码编译通过</li>
                        </ul>
                    `;
                    exercise.initial_code = `fn main() {
    let s = String::from("hello world");
    
    // 调用calculate_length函数并打印结果
    
}

// 实现calculate_length函数
`;
                    exercise.solution = `fn main() {
    let s = String::from("hello world");
    
    // 调用calculate_length函数并打印结果
    let length = calculate_length(s);
    println!("字符串长度: {}", length);
    
    // 注意：此处不能再使用s，因为它的所有权已经转移到函数中
}

// 实现calculate_length函数
fn calculate_length(s: String) -> usize {
    s.len()
}`;
                    exercise.hint = '函数参数如果不使用引用，将获取传入值的所有权。函数返回值也会转移所有权给调用者。';
                }
                break;
                
            // 可以添加更多主题的练习
            default:
                exercise.title = `${exercise.topic_name}练习`;
                exercise.description = `<p>这是一个关于${exercise.topic_name}的${exercise.difficulty_name}难度练习。</p>
                    <p><strong>任务</strong>：请根据Rust编程语言的最佳实践，完成下面的代码。</p>`;
                exercise.initial_code = `fn main() {
    println!("请完成这个${exercise.topic_name}练习");
}`;
                exercise.solution = `fn main() {
    println!("这是${exercise.topic_name}练习的一个示例解决方案");
    // 实际应用中，这里会有针对特定主题的完整解决方案
}`;
                exercise.hint = `思考${exercise.topic_name}的核心概念，应用Rust的最佳实践来解决问题。`;
        }
        
        return exercise;
    }
    
    // 生成模拟反馈 - 在实际应用中将被替换为API调用
    function generateMockFeedback(code, exercise) {
        // 简单的评分逻辑 - 实际应用中应该有更复杂的评估
        let score = 0;
        const strengths = [];
        const suggestions = [];
        
        // 检查代码是否包含关键元素
        if (exercise.topic === 'variables') {
            if (code.includes('mut')) {
                score += 30;
                strengths.push('正确使用了mut关键字声明可变变量');
            } else {
                suggestions.push('需要使用mut关键字声明可变变量');
            }
            
            if (code.includes('greeting = "Hello, Rust!"')) {
                score += 30;
                strengths.push('成功修改了变量值');
            } else {
                suggestions.push('需要将greeting变量修改为"Hello, Rust!"');
            }
            
            if (code.includes('println!')) {
                score += 20;
                strengths.push('使用println!打印了变量值');
            } else {
                suggestions.push('需要使用println!打印变量值');
            }
        } else if (exercise.topic === 'ownership') {
            if (code.includes('fn calculate_length(s: String)')) {
                score += 40;
                strengths.push('正确定义了接收String所有权的函数');
            } else {
                suggestions.push('函数应该接收String类型参数以获取所有权');
            }
            
            if (code.includes('s.len()')) {
                score += 30;
                strengths.push('正确使用len()方法获取字符串长度');
            } else {
                suggestions.push('应使用len()方法获取字符串长度');
            }
            
            if (code.includes('let length = calculate_length(s)')) {
                score += 30;
                strengths.push('正确调用函数并存储返回值');
            } else {
                suggestions.push('需要调用函数并存储返回的长度值');
            }
        }
        
        // 如果没有特定逻辑，给一个基本分数
        if (score === 0) {
            score = 65; // 基本分数
            strengths.push('提交了代码解答');
            suggestions.push('可以参考示例解答进一步改进代码');
        }
        
        // 确保至少有一个优点和建议
        if (strengths.length === 0) {
            strengths.push('尝试解决问题的思路是正确的');
        }
        
        if (suggestions.length === 0) {
            if (score < 100) {
                suggestions.push('可以进一步优化代码结构和可读性');
            } else {
                suggestions.push('代码已经很好，可以尝试更复杂的练习');
            }
        }
        
        // 生成反馈摘要
        let summary = '';
        if (score >= 90) {
            summary = '优秀！你的代码实现了所有要求，并且符合Rust的最佳实践。';
        } else if (score >= 70) {
            summary = '良好！你的代码实现了大部分要求，还有少量改进空间。';
        } else if (score >= 50) {
            summary = '基本合格。你的代码实现了部分要求，但还需要进一步改进。';
        } else {
            summary = '需要改进。你的代码未能满足大部分要求，请参考提供的建议进行修改。';
        }
        
        return {
            score: score,
            summary: summary,
            strengths: strengths,
            suggestions: suggestions
        };
    }
});